<template>
  <div style="position: relative;">

    <div class="editBtn m_hoverCP" v-if="formDisabled" @click="handleEdit">
      <img src="@assets/img/img53.png" alt="" style="width: 14px;height: 14px;"/>{{$t('message.Edit')}}
    </div>
    <div class="saveBtn m_hoverCP" v-else @click="submitForm">{{$t('message.Save')}}</div>
    <a-popconfirm :title="$t('message.Confirm_delete')+'?'" :cancelText="$t('message.Cancel')" :okText="$t('message.Confirm')" @confirm="() => onDel()" v-if="model.id && !topOrg">
      <div class="delBtn m_hoverCP">{{$t('message.Delete')}}</div>
    </a-popconfirm>
    <a-spin :spinning="confirmLoading">
      <div class="" style="height: 24px"></div>
      <div class="text1">{{ model.departName || '-' }}</div>
      <div class="text2">{{$t('message.Organization_Number')}}：{{ model.orgCode }}</div>
      <j-form-container>
        <a-form-model ref="form" :model="model" slot="detail" labelAlign="left">
          <div class="text3">{{$t('message.Basic_information')}}</div>
          <a-row>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Organization_name')" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                <a-input v-model="model.departName" :disabled="formDisabled"
                         :placeholder="$t('message.Please_enter')"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Whether_to_account_for_the_entity')" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                <j-switch v-model="model.costCalcSubject" :disabled="formDisabled" :options="[true,false]"></j-switch>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="!topOrg">
              <a-form-model-item :label="$t('message.Superior_organization')" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                <a-tree-select v-model="model.parentId" style="width: 100%" :placeholder="$t('message.Please_select')"
                               :disabled="formDisabled || topOrg" show-search treeNodeFilterProp="title"
                               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData"
                               tree-default-expand-all>
                </a-tree-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="!topOrg">
              <a-form-model-item :label="$t('message.The_equity_ratio_held_by_the_superior')" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                <a-input-number v-model="model.superiorShareholdingRatio" :disabled="formDisabled || topOrg"
                :placeholder="$t('message.Please_enter')" :default-value="100" style="width: 100%" :min="0"
                                :max="100" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <div class="text3">{{$t('message.Supplementary_information')}}</div>
          <a-row>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Organization_type')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag v-model="model.orgModelCode" :disabled="formDisabled" :placeholder="$t('message.Please_select')"
                                   dictCode="org_model_code"></j-dict-select-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Industry')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-category-select v-model="model.industry" :disabled="formDisabled" pcode="A02"
                :placeholder="$t('message.Please_select')"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Country_Region')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-area-linkage type="cascader" v-model="model.region" :disabled="formDisabled"
                :placeholder="$t('message.Please_select')"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Address')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.address" :disabled="formDisabled" :placeholder="$t('message.Please_select')"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <div class="text3">{{$t('message.Contact_information')}}</div>
          <a-row>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Contact_person')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.contactUser" :disabled="formDisabled" :placeholder="$t('message.Please_select')"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Contact_persons_phone_number')"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-group compact>
                  <a-select style="width: 20%" :defaultValue="model.contactNumberPrefix"
                            v-model="model.contactNumberPrefix" :disabled="formDisabled">
                    <a-select-option value="+86">+86</a-select-option>
                    <a-select-option value="+87">+87</a-select-option>
                  </a-select>
                  <a-input v-model="model.contactNumber" :disabled="formDisabled" style="width: 80%"
                  :placeholder="$t('message.Please_select')"></a-input>
                </a-input-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :label="$t('message.Contact_persons_email')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.contactMail" :disabled="formDisabled" :placeholder="$t('message.Please_select')"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </div>
</template>

<script>

import {httpAction, getAction, deleteAction} from '@/api/manage'

export default {
  name: 'SysDepartForm',
  components: {},
  data() {
    return {
      model: {
        contactNumberPrefix: '+86',
      },
      formDisabled: false,
      treeData: [],
      topOrg: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 24},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 22},
      },
      confirmLoading: false,
      url: {
        add: "/orgDept/save",
        edit: "/orgDept/save",
        queryById: "/orgDept/getById",
        treeData: "/orgDept/getTree"
      }
    }
  },
  computed: {},
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    // this.getTreeData()
  },
  methods: {
    getTreeData() {
      getAction(this.url.treeData, {}).then(res => {
        if (res.success) {
          this.treeData = res.result
        }
      })
    },
    add() {
      this.getTreeData()
      this.visible = true;
      this.formDisabled = false;
      this.topOrg = false;
      this.model = Object.assign({}, this.modelDefault);
    },
    edit(key) {
      this.getTreeData()
      this.model = Object.assign({}, this.modelDefault)
      this.getById(key)
      this.formDisabled = true;
      this.visible = true;
    },
    getById(key) {
      getAction(this.url.queryById, {deptId: key}).then((res) => {
        if (res.success) {
          if (res.result.topOrg) {
            res.result.parentId = ''
            this.topOrg = true
          } else {
            this.topOrg = false
          }
          this.model = res.result;
        }
      })
    },
    handleEdit() {
      this.formDisabled = false;
    },
    /**
     * 校验手机号
     */
    checkPhone(value) {
      if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
        return true
      } else {
        return false
      }
    },
    /**
     * 校验邮箱格式
     */
    checkEmail(value) {
      if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
        return true
      } else {
        return false
      }
    },
    submitForm() {
      if (!this.model.departName) {
        this.$message.warn(this.$t('message.Please_enter_the_organization_name'))
        return
      }
      if (!this.topOrg && !this.model.departName) {
        this.$message.warn(this.$t('message.Please_select_the_superior_organization'))
        return
      }
      if (!this.topOrg && !this.model.superiorShareholdingRatio && this.model.superiorShareholdingRatio !== 0 && this.model.superiorShareholdingRatio !== '0') {
        this.$message.warn(this.$t('message.Please_enter_the_equity_ratio_held_by_the_superior'))
        return
      }
      if (this.model.contactNumber && !this.checkPhone(this.model.contactNumber)) {
        this.$message.warn(this.$t('message.Please_enter_the_mobile_phone_number_in_the_correct_format'))
        return
      }
      if (this.model.contactMail && !this.checkEmail(this.model.contactMail)) {
        this.$message.warn(this.$t('message.Please_enter_the_email_address_in_the_correct_format'))
        return
      }
      this.confirmLoading = true;
      let httpurl = '';
      let method = '';
      if (!this.model.id) {
        httpurl += this.url.add;
        method = 'post';
      } else {
        httpurl += this.url.edit;
        method = 'put';
      }
      httpAction(httpurl, this.model, method).then((res) => {
        if (res.success) {
          this.formDisabled = true
          this.$message.success(res.message);
          this.$emit('ok');
        } else {
          this.$message.warning(res.message);
        }
      }).finally(() => {
        this.confirmLoading = false;
      })
    },
    /**
     * 删除组织
     */
    onDel() {
      deleteAction('/orgDept/delete', {
        id: this.model.id
      }).then(res => {
        if (res.success) {
          this.formDisabled = true
          this.$message.success(res.message);
          this.$emit('ok');
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    handleCategoryChange(value, backObj) {
      this.model = Object.assign(this.model, backObj);
    }
  }
}
</script>


<style lang="less" scoped>
///deep/ .ant-form-item {
//  margin-bottom: 16px;
//  //background: #F5F8F7;
//}

/deep/ .ant-form-item-label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #CF0D66;
  line-height: 22px;
}

.tabBox {
  background: #FFFFFF;
  border-radius: 3px;
}

.text1 {
  margin-bottom: 8px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}

.text2 {
  padding-bottom: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #888888;
}

.text3 {
  margin-top: 8px;
  margin-bottom: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}

.editBtn {
  position: absolute;
  top: 100px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 79px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid #888888;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #333333;
}

.saveBtn {
  position: absolute;
  top: 100px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid #148958;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #148958;
}

.delBtn {
  position: absolute;
  top: 100px;
  right: 124px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid #9A2142;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #9A2142;
}

</style>
